<template>
  <div id="container" >
    <div id="info" style="margin: 10px;">
      点云地址:  <input v-model="pntsPath" style="width: 500px;" placeholder="输入点云地址"></input>&nbsp;&nbsp;&nbsp;
      容差等级: <input v-model="pntsLevel" placeholder="输入等级"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      容差比: <input v-model="level" placeholder="输入等级"></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="showTileset">显示</button>
    </div>
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
import 'cesium/Widgets/widgets.css'

const Cesium = require('cesium/Cesium')
const ffi = require("ffi-napi")
const path = require('path')
const iconv = require('iconv-lite')
const en  = require('encoding')
const mySqlDll = new ffi.Library(path.resolve('resources/SqliteDemo'),{
  /*'doSQL':
      [
        'int',['string'],
      ],*/
/*   'doStr2':
       [
         'string',['string'],
       ],
  'doHello':['string',[]]*/
      'tStr':['int',['string']],
      'tStr2':['string',[]]
})

export default {
  name: 'App',
  data() {
    return {
      viewer: '',
      pntsPath:"http://127.0.0.1:9201/pnts/tileset.json",
      pntsLevel:16,
      level: 10
    }
  },
  methods: {
    init() {
/*
      const resBuffer = Buffer.alloc(800);
      const x = "";
      mySqlDll.tStr(x);
      mySqlDll.tStr(resBuffer);
      this.a = iconv.decode(resBuffer,'GBK').trim()
      let result =  iconv.decode(resBuffer,'GBK');
      console.log("结果 s1 "+ result)
      console.log("结果 s2 "+ x)
      let a = mySqlDll.tStr2();
      const resBuffer2 = Buffer.from(a);
      console.log("结果 s3"+iconv.decode(resBuffer2,'GBK'));
      console.log("结果 s3"+en.convert(a,'gbk','utf8'));
*/
/*      let str = "sss";
      const c = mySqlDll.doStr2(iconv.encode(str,'gbk'));
      console.log("bbbbbbbbbbbbb" + c);
      this.a = iconv.decode(mySqlDll.doHello(),'GBK');
      const resBuffer= Buffer.alloc(1024);
      mySqlDll.doStr2(resBuffer);
      console.log("bbbbbbbbbbbbb" +  iconv.decode(mySqlDll.doHello(),'GBK')+"");
      console.log("aaaaaaaaaaaaaa" +  iconv.decode(resBuffer,'GBK')+"");
      console.log("x" + str);*/
      if (false) {
        return
      }
      let that = this;
      Cesium.Ion.defaultAccessToken =
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZGFiMGFhMS05Zjk2LTRiZjItOGM1ZS04MzkxYWQ1Njc4MDUiLCJpZCI6MjE5MjAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODA4OTA5ODV9.ee-Qbt1q67vOqel8NSseg9icvsuAli4V6MBikAu680c';
      // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: true,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
        navigation: true,
        shadows: false,
        sceneModel: Cesium.SceneMode.SCENE3D
      });

      this.viewer.scene.globe.enableLighting = false;
      this.viewer.scene.globe.depthTestAgainstTerrain = true;
      this.viewer.scene.debugShowFramesPerSecond = true;
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(113.401250, 23.167000, 200),
        orientation: {
          heading: 0.0,
          pitch: Cesium.Math.toRadians(-20),
          roll: 0.0
        }
      });
      this.viewer.cesiumWidget.creditContainer.style.display = 'none';
      this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      this.viewer.scene.primitives.destroyPrimitives = false;
    },
    showTileset1() {
      console.log(1);
    }
    ,
    showTileset() {
      let that = this;
      this.viewer.scene.primitives.removeAll()
      console.log(this.viewer.scene.primitives.length);
      let tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url:this.pntsPath,
        maximumScreenSpaceError: this.pntsLevel,
        cullWithChildrenBounds:false,
        skipLevels:0,
        backFaceCulling:false,
        pointCloudShading:{
          maximumAttenuation: that.level,
          baseResolution:undefined,
          geometricErrorScale:1.0,
          attenuation:true,
          eyeDomeLighting:true

        }
      }));
      tileset.readyPromise.then(function (tileset) {
        if (tileset == null) {
          return
        }
        that.viewer.scene.primitives.add(tileset);
        that.viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
        that.changeHeight(20, tileset);
      }).otherwise(function (error) {
        console.log(error);
      });
    }
    ,
    changeHeight(height, tileset) {
      height = Number(height);
      if (isNaN(height)) {
        return;
      }
      var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
      var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
      var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
      var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    }
  },
  mounted() {
    this.init();
    window.addEventListener('drop', (e) => {
      e.preventDefault();
      e.stopPropagation();
      for (const f of e.dataTransfer.files) {
        console.log('File(s) you dragged here: ', f.path)
      }
    });
    window.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
  }
}
</script>
<style>
</style>
